<template>
	<view>
		<cu-custom :bgLinerBorder="true" :isBlack="false">
			<block slot="content">点餐记录</block>
		</cu-custom>
		<view class="p-l-15 p-t-15 p-b-15">
			<view class="p-r-15">
				<view class="wrap flex m-b-10" v-for="(item,index) in list" :key="index">
					<view class="flex align-center">
						<image :src="item.thumb_url" class="imgs" mode=""></image>
					</view>
					<view class="flex-1 p-l-10 flex flex-direction justify-space-between">
						<view class="f-17 fontBold">
							{{item.goods_name}}
						</view>
						<view class="">
							<view class="flex justify-space-between">
								<view class="f-12 black-9">
									<text v-if="item.goods_attr_str">规格：{{item.goods_attr_str}}</text>
								</view>
								<view class="f-12 nums">
									*{{item.goods_num}}
								</view>
							</view>
							<view class="flex justify-space-between">
								<view class="orange f-17 fontBold">
									￥{{item.price}}
								</view>
								<view class="orange f-17 fontBold">
									￥{{item.real_price}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class=" p-t-10 ">
				<view class="fontBold f-20 orange m-b-15 p-l-10">
					陪喝人员
				</view>
				<scroll-view scroll-x="true" style="white-space: nowrap;">
					<view class="flex p-b-15 ">
						<view class="top-item" v-for="(item,index) in drink_with_me" :key="index">
							<view class="flex align-center">
								<image :src="item.photo" class="top-img"></image>
							</view>
							<view class="p-t-10 p-l-10 p-r-10 p-b-10">
								<view class="fontBold text-overflow-2 top-title">
									{{item.name}}
								</view>
								<view class="f-12 text-overflow-2 top-text m-t-5">
									{{item.introduce}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="nodata" v-if="list.length == 0">
			暂无数据~
		</view>
		<view style="height: 180rpx;"></view>
		<view class="bottom-wrap ">
			<view class="flex justify-center">
				<view class="f-18 orange fontBold" >
					消费金额汇总：￥{{info.total_price||0}}
				</view>
			</view>
			<view class="bottom-btn bottom-btn2 m-t-3" @click="sub(1)">
				邀请好友
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				info:{},
				list:[],
				drink_with_me:[],
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id;
			}
			this.getIndex();
		},
		methods: {
			getIndex(){
				let data = {
					order_id:this.id
				}
				this.$http('/apicloud/Order/OrderInfo',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						let list = datas.goods;
						this.info = datas.info;
						this.drink_with_me = datas.info.drink_with_me?JSON.parse(datas.info.drink_with_me):[];
						this.list = list;
					}
				})
			},
			sub(type){
				switch (type){
					case 1:
					uni.navigateTo({
						url:'/pages/operate/invite'
					})
					break;
				}
			},
		}
	}
</script>

<style lang="less">
	.bottom-wrap {
		box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.07);
		border-radius: 20px 20px 0 0;
		height: 180rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		background: #ffffff;
		width: 100%;
		padding: 20rpx 30rpx 0 30rpx;
		.bottom-btn {
			width: 100%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-weight: bold;
			border-radius: 60rpx;
		}
			
			
		.bottom-btn1 {
			background: #FFCB00;
		}
		.bottom-btn2 {
			background: #FF5200;
		}
	}
	.wrap{
		background: #FFFFFF;
		box-shadow: 0px 0px 16px rgba(0,0,0,0.05);
		border-radius: 16rpx;
		padding:20rpx;
	}
	.imgs{
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
	}
	.nums{
		color: #FFCB00;
	}
	.top-item{
		width: 220rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 16px rgba(0,0,0,0.1);
		border-radius: 16rpx;
		margin-right: 15rpx;
		.top-title{
			text-align: center;
			white-space: normal;
		}
		.top-text{
			text-align: center;
			white-space: normal;
		}
		.top-img{
			width: 220rpx;
			height: 200rpx;
			border-radius: 16rpx 16rpx 0 0;
		}
	}
</style>
